
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<title>jQuery.width</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>

<div style="background:red;border:20px solid #ccc;">DIV</div>

<button id="test1">设值</button>

<ul></ul>

<script type="text/javascript">

var div = document.querySelectorAll('div')[0]

$('#test1').click(function(){
	show('之前'+ $(div).width())	
	div.style['width'] = '500px'
	show('之后'+ div.style['width'])
})

function show(data){
	$('ul').append('<li>'+ data +'</li>')
}

</script>
</body>
</html>